iT邦幫忙

2026 iThome 鐵人賽

DAY 20
0
IT Operation

Microsoft Agent Solution (續)系列 第 20 篇

Day20 - Copilot Studio Standard 實作:用 Adaptive Card 收集資料,並自動寄出 Email

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20261004/20103333dmBL60qbYl.png
今天要來介紹一個實務上非常實用的做法: 在 Copilot Studio 裡,使用 Adaptive Card 做一個資料輸入表單,收集使用者的姓名與 Email,接著透過 Office 365 Outlook 自動寄出通知信。

這次筆者幫 Office Admin Agent 加一個新功能,目標很單純:使用者輸入姓名與 Email,按下 Submit,Copilot Studio ,透過 Outlook 寄出 Email。

🧭 先建立 Topic:
新增 User Registration Topic,先描述希望處理的情境。
原本以為只要說「請收集姓名與 Email」就能得到表單,結果它只會逐題問答。這不是錯,但不是筆者今天要的 UX。 所以我把原本自動產生的流程刪掉,改用手動新增 Adaptive Card,自己掌握表單長相與欄位名稱。

https://ithelp.ithome.com.tw/upload/images/20261004/20103333bfI0w009kR.jpg

⚠️ 第一個踩坑:描述不等於 UI 設計
只描述「請使用者提供姓名與 Email」,不代表一定會產生 Adaptive Card。
如果需要卡片式表單,建議在 Topic 中明確加入 Adaptive Card 動作。

🎨 使用 Adaptive Card Designer 設計表單
在 Topic 流程中新增動作時,我選擇 Ask with adaptive card。Copilot Studio 會開啟 Adaptive Card Designer,用拖拉方式加入表單元件。

https://ithelp.ithome.com.tw/upload/images/20261004/20103333WhiFejDdFC.jpg

Adaptive Card Designer 同時提供拖拉設計與 JSON Payload 編輯。
這次使用的是 Adaptive Card schema version 1.5。畫面上可以看到各種元件,例如 Input.Text、Button、TextBlock 等。 筆者先拖入一個文字輸入欄位,接著設定它的 ID 與 Label。

https://ithelp.ithome.com.tw/upload/images/20261004/20103333Ci5iBPS2z6.jpg

加入 Input.Text 後,必須設定唯一的 ID。
第一個欄位我設定為姓名,ID 使用 txtName;第二個欄位則設定為 Email,ID 使用 txtEmail。 這些 ID 不是拿來裝飾的,後面寄信時,要靠它們取得使用者輸入的內容,所以命名不要太隨便,否則後面找變數會找到懷疑人生。加入 Submit 按鈕,並設定按鈕動作。

https://ithelp.ithome.com.tw/upload/images/20261004/20103333GTyqhHHTkB.jpg

🧩 把輸入值組成 Email 內容
Adaptive Card 儲存後,會自動產生輸出變數,例如 txtName 與 txtEmail。 接下來筆者要做的是把姓名放進 Email 內容,再把 Email 地址當成收件者。

在 Topic 中加入 Office 365 Outlook 的寄信工具。
我新增的是 Office 365 Outlook 的 Send an email (V2)。這裡要注意,Copilot Studio 會使用目前登入帳號的連線來寄信。

https://ithelp.ithome.com.tw/upload/images/20261004/20103333upyWPPPZyP.jpg

Send an email (V2) 需要設定 Body、Subject 與 To。
Email 的 Body 需要多段文字與變數混合,所以筆者另外建立一個文字變數 VarBody。先建立一般變數,後來才發現內容比較長,應該使用文字型態的變數。建立變數,準備組合 Email Body。

https://ithelp.ithome.com.tw/upload/images/20261004/201033336gHuWK6g2a.jpg

設定文字型態變數,準備放入較長的內容。
接著我在 Set text variable 裡組合文字,把 Adaptive Card 的姓名輸入值插入 Body。 例如可以組成:

📨 Email Body 範例
Your Name is:{txtName}
實際畫面中,筆者是透過變數選擇器插入 txtName,不是把變數名稱當普通文字打上去。
放入 VarBody,也就是剛才組合好的文字內容。

https://ithelp.ithome.com.tw/upload/images/20261004/201033333XeeocTepI.jpg

🚀 最後測試:填表、送出、Email 到手
在測試窗格輸入註冊需求,Adaptive Card 顯示姓名、Email 與 Submit 按鈕。
筆者輸入姓名與 Email,按下 Submit。

https://ithelp.ithome.com.tw/upload/images/20261004/201033332DLVFZjrzJ.jpg

測試成功後,Outlook 收到寄出的通知信。

https://ithelp.ithome.com.tw/upload/images/20261004/20103333BV20eaml2u.jpg

📝 本日結論
Adaptive Card 在 Copilot Studio 裡是一個很實用的資料收集工具/images/emoticon/emoticon07.gif。 它不只可以收姓名與 Email,也能延伸成選項、日期、評分、核取方塊等表單元件,適合做內部申請、活動報名、服務登記,甚至簡單的 IT Help Desk 前置資料收集,搭配 Tools 可以做到 Outlook 的通知流程。


上一篇
Day19 - Copilot Studio Standard 實作:打造辦公室小助手之天氣查詢
下一篇
Day21 - Copilot Studio Standard 實作:用 Topic 與 Condition 切換不同 Topic 來製作選單功能
系列文
Microsoft Agent Solution (續) 共 23 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言